import React, { useState, useEffect, useLayoutEffect } from 'react'
import '../less/useLayoutEffect.less'

export default function App() {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);

    const random = () => {
        return 10 + Math.random() * 200
    }
    useEffect(() => {
        if (count1 === 0) {
            setCount1(random());
        }
    }, [count1]);
    useLayoutEffect(() => {
        if (count2 === 0) {
            setCount2(random());
        }
    }, [count2]);
    return (
        <div className="useLayoutEffect">
            {/* 点击useEffect上面的数字会有闪烁 */}
            <div onClick={() => setCount1(0)}>useEffect：{count1}</div>
            <div onClick={() => setCount2(0)}>useLayoutEffect：{count2}</div>
        </div>
    );
}
